import React  from "react";
import './App.css'
import {Select, PageHeader, Calendar, Tabs, Modal} from "antd";
import "antd/dist/antd.css";
import Axios from "axios";


class Title extends React.Component {
    render() {
        return (
            <PageHeader
                className="site-page-header"
                title="冬筑348值日表"
                subTitle={new Date().toLocaleDateString()}
            />
        )
    }
}

// eslint-disable-next-line
class Settings extends React.Component {

    render() {
        return (
            <Tabs defaultActiveKey='1' centered>
                <Tabs.TabPane tab="设置">
                    <span style={{padding: '10px'}}>当月1日值日</span>
                    <Select style={{width: '100px'}}>
                        <Select.Option value='黄泽辉'>黄泽辉</Select.Option>
                        <Select.Option value='余健聪'>余健聪</Select.Option>
                        <Select.Option value='刘灏'>刘灏</Select.Option>
                        <Select.Option value='郭泳东'>郭泳东</Select.Option>
                    </Select>
                </Tabs.TabPane>
            </Tabs>
        )
    }
}

class Footer extends React.Component {
    render() {
        return (
            <div className='footer'>Power by:React</div>
        )
    }
}


export default class App extends React.Component {

    constructor() {
        super();
        this.state = {
            isModelVisible: false,
            currentTime: null,
            finishedDate: []
        }
    }

    // 渲染名字
    dateCellRender = (value) => {

        const now = new Date('2021-11-02')
        // eslint-disable-next-line
        const left = parseInt((value - now)/(24 * 60 * 60 * 1000))
        let result = ''
        switch (left % 4){
            case 0 : result = '黄泽辉'; break;
            case 1 : result = '余健聪'; break;
            case 2 : result = '刘灏'; break;
            case 3 : result = '郭泳东'; break;
            default: result = '黄泽辉';
        }

        const today = new Date().toISOString().split('T')[0]


        if(value - new Date() > 0){
            return (
                <div>{result}</div>
            )
        } else {
            if(value.toISOString().split('T')[0] === today){
                return (
                    <div style={{color: "blue"}}>{result}</div>
                )
            }
            return (
                <div>
                    <div style={{color: '#ccc'}}>{result}</div>
                </div>
            )
        }
    }

    // 点击回调
    clickDate = (date) => {
        // this.setState({isModelVisible: true,currentTime: date})
        console.log(date.toISOString())
    }

    handleOk = () => {
        this.setState({isModelVisible: false})
        console.log(this.state.currentTime.toString() + '已完成')
    }

    handleCancel = () => {
        this.setState({isModelVisible: false})
    }


    componentDidMount =  () => {
        Axios.get('https://cdn.liyanhui.com/data.json').then(res=>{
            console.log(res)
            this.setState({finishedDate: res.data})
        })
    }

    render() {
        return (
            <div className="App">
                <Title/>
                {/*<Settings/>*/}
                <Calendar style={{padding: '20px'}} dateCellRender={this.dateCellRender} onSelect={this.clickDate}></Calendar>
                <Modal title="是否已完成" visible={this.state.isModelVisible} onOk={this.handleOk} onCancel={this.handleCancel}></Modal>
                <Footer/>
            </div>
        )
    }
}